<script setup>
import { ref, defineProps, watch } from 'vue'
import { ArrowDown } from '@element-plus/icons-vue'
// import { useRoute } from 'vue-router'
// const route = useRoute()
import {
  GetResultTaskService
  // GetDetailTaskService
} from '@/api/task.js'

const nodeAddr = window.location.origin

const props = defineProps({
  task: []
})
//
// 监听选中的任务信息selectTask是否发生改变
watch(
  () => props.task,
  (newValue) => {
    if (newValue.id) {
      const showMore = async () => {
        const { data } = await GetResultTaskService(props.task.id)
        console.log('task', data)

        taskInfos.value = data ? data.data : []
      }
      showMore()
    }
  },
  { immediate: true, deep: true }
)

const taskInfos = ref([])
</script>

<template>
  <div
    class="list"
    style="background-color: rgb(49, 56, 98); padding: 20px 10px"
  >
    <div>
      <div
        style="
          margin-bottom: 15px;
          display: flex;
          justify-content: start;
          align-self: center;
        "
      >
        <span style="margin: 0 5px"
          ><img src="../../../assets/icons_tasks.png" alt=""
        /></span>
        <span> 任务编号:{{ props.task.id }}</span>
      </div>
      <div style="padding: 0 15px">
        <div class="detailTask">
          <span>任务提交时间：</span
          ><span style="color: #e34c4c">{{
            props.task.ts ? props.task.ts : '暂无提交时间'
          }}</span>
        </div>
        <div class="detailTask">
          <span>信息:</span>
          <span style="color: #e34c4c">{{
            props.task.meta ? props.task.meta : '暂无信息'
          }}</span>
        </div>
        <div class="detailTask">
          <span>优先级：</span
          ><span style="color: #e34c4c">{{ props.task.priority }}</span>
        </div>
        <div class="detailTask">
          <span>输入数据源：</span>
          <el-dropdown style="border-color: red">
            <span
              class="el-dropdown-link"
              style="color: white; border-color: red"
            >
              List
              <el-icon class="el-icon--right" style="border-color: red">
                <arrow-down />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu style="border-color: red">
                <!-- 使用 v-for 遍历 props.task.sources -->
                <el-dropdown-item
                  v-for="(source, index) in props.task.sources"
                  :key="index"
                >
                  {{ source }}
                  <!-- 渲染每个 source -->
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
        <div class="detailTask">
          <span>状态：</span
          ><span style="color: #e34c4c">{{ props.task.status }}</span>
        </div>
        <div class="detailTask">
          <span>任务提交地址：</span
          ><span style="color: #e34c4c">{{ nodeAddr }}</span>
        </div>
        <div class="detailTask">
          <span>结果：</span
          ><span style="color: #e34c4c">{{
            taskInfos ? taskInfos.descp : '暂无结果数据'
          }}</span>
        </div>
      </div>
    </div>
    <!-- <el-empty v-else description="请选择一项任务"></el-empty> -->
  </div>
</template>

<style scoped>
:deep(.el-tooltip__trigger:focus-visible) {
  outline: unset;
}
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
.detailTask {
  padding: 20px 15px;
  display: flex;
  justify-content: space-between;
  background-color: rgb(23, 41, 83);
  margin-bottom: 15px;
}
.el-dialog {
  /* width: 577px; */
  /* height: 288px; */
  background-color: #313862 !important;
  border-top: 21px solid #5ed1f7;
}
.el-dialog__title {
  font-size: 16px;
  color: #fff;
}
.el-form-item__label {
  font-size: 15px;
  color: #fff;
}

.dialog-footer {
  display: flex;
  margin-top: -30px;
}
.el-button {
  width: 59px;
  height: 50px;
  /* background: #8091a5; */
  background-color: rgb(58, 65, 106);
  color: white;
  border: 1px solid rgba(128, 145, 165, 0.1);
  /* opacity: 0.2; */
}

.el-button:hover {
  color: #fff;
  background: linear-gradient(90deg, #5ed1f7 0%, #4791f3 100%);
  border: 1px solid #4790f3;
}

.input-field {
  padding-left: 10px;
  width: 273px;
  height: 36px;
  background: rgba(0, 0, 0, 0);
  border: 1px solid rgb(58, 65, 106);
  /* opacity: 0.8; */
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 16px;
  color: #8091a5;
  line-height: 24px;
  /* text-align: center; */
  font-style: normal;
  text-transform: none;
  outline: none;
  background-color: rgb(58, 65, 106);
}
</style>
